<template>
    <div id="proprietor" style="padding: 0 18px 0 18px;background-color: #f3f4f7">
        <a-tabs default-active-key="proprietor0" @change="callback">
            <a-tab-pane v-for="(item, i) in this.data.owners"
                        :key="'proprietor' + i" :tab="item.name">
                <a-card hoverable style="width: 100%;">
                    <!--                    <img-->
                    <!--                            slot="cover"-->
                    <!--                            alt="avatar"-->
                    <!--                            src="http://news.chinaxiaokang.com/uploads/image/20181203/1543796794754883.jpg"-->
                    <!--                    />-->
                    <div class="avatar">
                        <div v-for="img in imageUrl" :key="img.key">
                            <a-avatar :size="84"
                                      :src="img.url" v-if="img.key == item.imgkey"/>
                        </div>

                        <h1>{{item.name}}</h1>
                        <a-tag :color="item.relation == '业主'?'blue':'purple'">{{item.relation}}</a-tag>
                        <a-tag :color="item.instate?'green':'red'">{{(item.instate ? '在住':'未住')}}</a-tag>
                    </div>
                    <a-card-meta style="padding-top: 24px">

                        <template slot="description">
                            <div class="div-title"><label class="my-label">身份证：</label></div>
                            <div class="div-content">{{item.idcard}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">性别：</label></div>
                            <div class="div-content">{{item.sex == 'male'?'男':'女'}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">民族：</label></div>
                            <div class="div-content">{{item.pepole}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">出生日期：</label></div>
                            <div class="div-content">{{item.birthday}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">地址：</label></div>
                            <div class="div-content">{{item.address}}</div>
                        </template>
                    </a-card-meta>
                </a-card>
                <a-card size="small" title="联系方式">
                    <a-card-meta>

                        <template slot="description">
                            <div class="div-title"><label class="my-label">手机：</label></div>
                            <div class="div-content">{{item.cellphone}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">电话：</label></div>
                            <div class="div-content">{{item.telphone}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">紧急联系电话：</label></div>
                            <div class="div-content">{{item.importphone}}</div>
                            <br/>
                            <div class="div-title"><label class="my-label">联系地址：</label></div>
                            <div class="div-content">{{item.contactaddress}}</div>
                        </template>
                    </a-card-meta>
                </a-card>
                <a-card size="small" title="工作信息">
                    <a-card-meta>
                        <template slot="description" style="display: inline;">
                            <label class="my-label">工作单位：</label>
                            <div class="div-content">{{item.company}}</div>
                            <br/>
                            <label class="my-label">职业：</label>
                            <div class="div-content">{{item.workname}}</div>
                            <br/>
                            <label class="my-label">职位：</label>
                            <div class="div-content">{{item.worklevel}}</div>
                        </template>
                    </a-card-meta>
                </a-card>
                <a-card size="small">
                    <div slot="title">
                        <label style="padding-right: 12px">标签</label><a-tag color="orange" v-for="(item, i) in item.tags" :key="'tag' + i">{{item.tag}}</a-tag>
                    </div>
                </a-card>
            </a-tab-pane>

            <a-tab-pane key="carinfo" tab="车辆">
                <a-card size="small" v-for="(item, i) in this.data.carinfos"
                        :key="'car' + i">
                    <label class="ant-descriptions-item-label">车牌：</label>{{item.number}}
                    <br />
                    <label class="ant-descriptions-item-label">品牌：</label>{{item.brand}}
                </a-card>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
    // const data = {
    //     id: 20,
    //     name: 'ssfsd',
    //     owners: [
    //         {
    //             id: 1,
    //             name: '东哥',
    //             relation: '业主',
    //             instate: true,
    //             idcard: '332601196202181212',
    //             sex: 'male',
    //             pepole: '汉',
    //             birthday: '19660304',
    //             address: 'prison',
    //             cellphone: '138',
    //             contactaddress: '911',
    //             company: '方远',
    //             workname: '大总管',
    //             tags: [
    //                 {
    //                     id: 1,
    //                     tag: '大叔',
    //                 },
    //                 {
    //                     id: 2,
    //                     tag: '吹水'
    //                 }
    //             ]
    //         },
    //         {
    //             id: 2,
    //             name: '东哥2',
    //             relation: '租户',
    //             instate: false,
    //             idcard: '332601196202181212',
    //             sex: 'male',
    //             pepole: '汉',
    //             tags: [
    //                 {
    //                     id: 1,
    //                     tag: '大叔',
    //                 },
    //                 {
    //                     id: 2,
    //                     tag: '胖子'
    //                 }
    //             ]
    //         }
    //     ],
    //     carinfos: [
    //         {
    //             id: 1,
    //             number: '浙JB62345',
    //             brand: '宝马',
    //         },
    //         {
    //             id: 2,
    //             number: '浙JB62345',
    //             brand: '特斯拉',
    //         },
    //     ]
    // }
    import {doPostUnlencoded} from "@/utils/requestUtil";
    export default {
        inject: ['setTitle'],
        name: "proprietor-info",
        data() {
            return {
                data: [],
                imageUrl: [],
                params: {
                    id: this.$route.params.detailid
                }
            };
        },
        beforeMount() {
            doPostUnlencoded("/fygcp/api/propertydetail/", this.params).then((res) => {

                if (res.success) {
                    this.data = res.data;
                    this.setImg(res.data.owners);
                    this.setTitle(this.$route.query.name + ' ' + res.data.name);
                }
                console.info(this.imageUrl);
            }).catch((err) => {
                this.$message.error("status:" + err.status + " msg:访问被拒绝。" )
            })
            // this.data = data;
        },
        methods: {
            callback(key) {
                console.log(key);
            },
            setImg(data) {
                for (let i = 0; i < data.length; i ++) {
                    this.getImg(data[i].imgkey);
                }
            },
            changeActivekey(key) {
                console.log(key);
            },
            getImg(key) {
                let params = {
                    filename: key,
                    bucket: 'fygproperty'
                }
                doPostUnlencoded("/enroll/oss/getobjwithbucket", params).then((res) => {
                    if (res.result) {
                        let test = {
                            key: key,
                            url: res.data,
                        }
                        this.imageUrl.push(test);
                        // this.imageUrl[i] = res.data;
                    }
                }).catch((err) => {

                    console.info(err);
                });
            }
        },
    }
</script>

<style>
    #proprietor .ant-descriptions-item-label {
        font-size: 12px;
        font-weight: bold;
    }

    #proprietor .ant-card-cover {

    }

    #proprietor .ant-card-body {
        padding: 12px;
    }

    #proprietor .ant-card-meta {
        padding: 0 0 0px 0px;
    }

    #proprietor .ant-card-meta-title {
        background-color: whitesmoke;
        font-size: 14px;
    }

    #proprietor .ant-card-meta-description {
        line-height: 24px;
        color: #999999;
    }

    #proprietor .my-label {
        color: #666666;
        font-size: 14px;
        font-weight: bold;
    }

    #proprietor .div-title {
        width: 40%;
        display: inline;
    }

    #proprietor .div-content {
        text-align: right;
        display: inline;
    }

    #proprietor .avatar {
        width: 100%;
        text-align: center;
    }
    #proprietor .ant-card {
        border-radius: 6px;
        border: white;
        margin-bottom: 20px;
    }
    #proprietor .ant-tabs-bar {
        margin-bottom: -2px;
    }
    #proprietor .ant-card-head {
        border-bottom: 0px;
    }
    #proprietor .ant-card-head-title {
        color: #1890ff;
    }
</style>
